<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
    <div id="vuebox">

        <div class="row">
            <div class="col-md-9 col-lg-9" >
                <form class="form-inline" role="form" style="padding-left: 250px;">
                    <div class="form-group" style="padding-left: 20px;">
                        查询联系人:
                        <input type="text" id="name"/>
                        <button type="button"  @click="selbtn()">查找</button>
                    </div>

                </form>
            </div>
            <div class="col-md-3 col-lg-3 text-right">
                <a href="javascript:void(0)" @click="openAdd()" class="btn btn-primary">添加</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12" v-show="contactlist.size">
                <br/>
                <table class="table table-striped" >
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>手机</th>
                        <th>QQ</th>
                        <th>Email</th>
                        <th>地址</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in contactlist.list">
                        <td>{{item.id}}</td>
                        <td><a href="javascript:void(0)" @click="openUpdate(item.id)">{{item.cname}}</a></td>
                        <td>{{item.mobile}}</td>
                        <td>{{item.qq}}</td>
                        <td>{{item.email}}</td>
                        <td>{{item.address}}</td>
                        <td>
                            <button class="btn btn-group" @click="openUpdate(item.id)">修改</button>
                            <button class="btn btn-success"@click="deleteContact(item.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <br/>
            </div>
            <div class="col-md-12" v-show="!contactlist.size">
                <h2>非常抱歉，没有找到与“ {{cname}} ”相关的联系人!</h2>
            </div>
        </div>
        <!--上一页下一页-->
        <div class="row">
            <div class="col-md-12" align="center">
                <ul class="pagination ">
                    <li v-show="contactlist.hasPreviousPage"><a href="javascript:void(0)" @click="prev()">&laquo;</a></li>
                    <li :class="{active:contactlist.pageNum==i}" v-for="i in contactlist.navigatepageNums">
                        <a href="javascript:void(0)"  @click="inpage(i)">{{i}}</a>
                    </li>
                    <li v-show="contactlist.hasNextPage"><a href="javascript:void(0)" @click="next()">&raquo;</a></li>
                </ul>
            </div>
        </div>


        <!-- 添加模态框-->
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">添加联系人</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="cname" class="col-sm-2 control-label">姓名:</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="contact.cname" id="cname"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mobile" class="col-sm-2 control-label">手机:</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="contact.mobile" id="mobile" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="qq" class="col-sm-2 control-label">QQ:</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="contact.qq" id="qq" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="10"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">email:</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="contact.email" id="email"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2 control-label">地址:</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="contact.address" id="address"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!--data-dismiss="modal"-->
                        <a href="#" class="btn btn-primary" @click="savecontact()">保存</a>
                        <button type="button" class="btn btn-default" @click="reset()" >重置</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            pageNum:1,
            pageSize:3,
            pagelist:1,//页数
            cname:null,
            contactlist:[],
            contact:{id:0,cname:null,mobile:null,qq:null,email:null,address:null}
        },mounted() {
            this.queryAll();
        },methods:{
            queryAll:function () {
                axios({url:"/select/contact", method:"post",
                    params:{cname:this.cname, pageNum:this.pageNum, pageSize:this.pageSize}})
                    .then(res=>{this.contactlist=res.data.data})
            }
            ,
            selbtn:function () {
                this.cname=$("#name").val();
                this.queryAll();
            },
            prev:function () {//上一页
                this.pageNum +=-1;
                this.queryAll();
            },
            next:function () {//下一页
                this.pageNum+=+1;
                this.queryAll();
            },
            inpage:function (i) {//页数跳转
                this.pageNum=i;
                this.queryAll();
            },
            openAdd:function () {//打开添加模态框
                this.contact={id:null,cname:null,mobile:null,qq:null,email:null,address:null}
                $("#AddModal").modal("show");
            },
            openUpdate:function (id) {//打开修改模态框
                $("#AddModal").modal("show");
                axios({url:"/select/contact/by/id", method:"post",
                    params:{id:id}})
                    .then(res=>{this.contact=res.data.data})

            },
            savecontact:function () {
                if(this.contact.cname==null){
                    alert("请输入联系人姓名!");
                    return false;
                }
                if(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(this.contact.email)==false){
                    alert("请填写正确的邮箱地址!");
                    return false;
                }
                if(this.contact.address==null){
                    alert("请输入地址!");
                    return false;
                }

                axios.post("/savecontact",this.contact)
                    .then(res=>{
                        if(res.data.result="SUCCESS"){
                            alert("操作成功!");
                            $("#AddModal").modal("hide");
                            this.contact={id:null,cname:null,mobile:null,qq:null,email:null,address:null}
                            this.queryAll();
                        }
                    })
            },
            reset:function () {
                if(this.contact.id!=null){
                    axios({url:"/select/contact/by/id", method:"post",
                        params:{id:this.contact.id}})
                        .then(res=>{this.contact=res.data.data})
                }else{
                    this.contact={id:null,cname:null,mobile:null,qq:null,email:null,address:null}
                }

            },
        deleteContact:function (id) {
            axios.get("/delContactById",{params:{id:id}}).then(res=>{
                this.delResult=res.data;
                if (this.delResult.result=='SUCCESS'){
                    alert("删除成功")
                    this.queryAll(this.pageNum);
                }else {
                    alert(this.delResult.message);
                }
            })
        }

        },filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d /*+ ' ' + h + ':' + m + ':' + s*/;
            }
        }


    })
</script>